<template>
	<view class="container p20">
		<view class="content">
			<view class="dome pt20 pb50 pl20 pr20 ">
				<view class="aCenter">
					<view class="workOrder">
						工单
					</view>

					<view class="workOrder_number">
						{{ saleOrderCode || '' }}
					</view>
				</view>

				<view class="jBetween aCenter" style="margin-top: 14rpx;">
					<view class="aCenter">
						<view class="jCenter" style="width: 70rpx;">
							<image style="width: 48rpx; height: 48rpx;" src="/static/images/time_icon.png" mode="">
							</image>
						</view>

						<view class="workOrder_number">
							{{ createTime || '' }}
						</view>
					</view>
				</view>

				<view class="flex mb10" style="margin-top: 16rpx;">
					<view class="w200" style="color: #B4B4B4;">
						LOGO名称:
					</view>
					<view class="w480" style="word-break: break-word;color: #A3BD92;">
						{{ customerName }}
					</view>
				</view>

				<view class="flex mb10">
					<view class="w200" style="color: #B4B4B4;">
						订单数量:
					</view>
					<view class="w480" style="word-break: break-word;color: #A3BD92;">
						{{ applyNumber }}
					</view>
				</view>

				<view class="flex mb10">
					<view class="w200" style="color: #B4B4B4;">
						产品名称:
					</view>
					<view class="w480" style="word-break: break-word;color: #A3BD92;">
						{{ materialName }}
					</view>
				</view>

				<view class="flex mb10">
					<view class="w200" style="color: #B4B4B4;">
						本工序名称:
					</view>
					<view class="w480" style="word-break: break-word;color: #A3BD92;">
						{{ datails.workName || 0 }}
					</view>
				</view>

				<view class="flex mb10">
					<view class="w200" style="color: #B4B4B4;">
						本次完工数量:
					</view>
					<view class="w480" style="word-break: break-word;color: #A3BD92;">
						{{ datails.produceNumber || 0 }}
					</view>
				</view>


				<view class="dividingLine" style="margin-top: 20rpx;"></view>

				<view class="flex mb10">
					<view class="w200" style="color: #B4B4B4;">
						备注:
					</view>
					<view class="w480" style="word-break: break-word;color: red;">
						{{ remark || '' }}
					</view>
				</view>
			</view>

			<!-- <view class="mb20">
				产品名称:{{ materialName || '' }}
			</view>
			<view class="">
				本工序名称:{{ datails.workName || 0 }}
			</view>

			<view class="jBetween mb20">
				<view class="">
					本次完工数量:{{ datails.produceNumber || 0 }}
				</view>

				<u-checkbox-group v-model="checked" placement="column">
					<u-checkbox shape="circle" name="checked" label="此工序完结"></u-checkbox>
				</u-checkbox-group>
			</view> -->


			<view class=" flex" style="margin-top: 50rpx;">
				<view class="flex-1">
					<u-button @click="handleAdd" type="success" text="录入工费"></u-button>
				</view>
				<view class="flex-1 " style="margin: 0 0 0 30rpx;">
					<u-button @click="handleCargoDamage" type="warning " text="录入货损"></u-button>
				</view>
				<!-- 	<view class="flex-1">
					<u-button @click="handleProcessCompletion" type="primary " text="提交"></u-button>
				</view> -->
			</view>

			<!-- 添加工费 -->
			<!-- @open="open" -->
			<u-popup :show="addShow" mode="center" @close="handleAddClose" :closeOnClickOverlay="false" :round="10">
				<view class="w650 p30">
					<u--form labelPosition="top" labelWidth="90" :model="info" :rules="rules" ref="uForm">
						<u-form-item label="员工部门" prop="departmentNume" borderBottom @click="departmentShow = true">
							<u--input v-model="info.departmentNume" disabled disabledColor="#ffffff" placeholder="请选择部门"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="员工姓名" prop="name" borderBottom @click="employeeShow = true">
							<u--input v-model="info.name" disabled disabledColor="#ffffff" placeholder="请选择员工"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="生产数量" prop="number" borderBottom>
							<u--input v-model="info.number" type="number" border="none" placeholder="请输入数量"></u--input>
						</u-form-item>
					</u--form>

					<u-picker :show="employeeShow" :columns="[employeeList]" keyName="name"
						@confirm="handleEmployeeConfirm" @close="employeeShow=false"
						@cancel="employeeShow=false"></u-picker>
						
					<u-picker :show="departmentShow" :columns="[departmentList]" keyName="deptName"
						@confirm="handleDepartmentConfirm" @close="departmentShow=false"
						@cancel="departmentShow=false"></u-picker>

					<view class="jCenter mt30">
						<view class="w200 " style="margin-right: 30rpx;">
							<u-button size="small" @click="handleAddClose" text="取消"></u-button>
						</view>
						<view class="w200">
							<u-button size="small" @click="handleAddConfirm" type="primary" text="确认"></u-button>
						</view>
					</view>
				</view>
			</u-popup>

			<!-- 添加货损 -->
			<u-popup :show="addCargoDamageShow" mode="center" @close="handleCargoDamageClose"
				:closeOnClickOverlay="false" :round="10">
				<view class=" p30" style="width: 650rpx;">
					<u--form labelPosition="top" labelWidth="90" :model="cargoDamageInfo" :rules="cargoDamageRules"
						ref="uCargoDamageForm">
						<!-- 	<u-form-item label="配件名称" prop="name" borderBottom @click="accessoriesShow = true">
							<u--input v-model="cargoDamageInfo.name" disabled disabledColor="#ffffff"
								placeholder="请选择配件名称" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item> -->
						<u-form-item label="货损数量" prop="damageNumber" borderBottom>
							<u--input v-model="cargoDamageInfo.damageNumber" type="number" border="none"
								placeholder="请货损数量"></u--input>
						</u-form-item>
						<u-form-item label="货损原因" prop="damageName" borderBottom @click="cargoDamageShow = true">
							<u--input v-model="cargoDamageInfo.damageName" disabled disabledColor="#ffffff"
								placeholder="请选择货损原因" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="责任人/供应商" prop="responsibilityName" borderBottom
							@click="supplierShow = true">
							<u--input v-model="cargoDamageInfo.responsibilityName" disabled disabledColor="#ffffff"
								placeholder="请选择责任人/供应商" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="货损单价" prop="price" borderBottom>
							<u--input v-model="cargoDamageInfo.price" type="number" border="none"
								placeholder="请货损单价"></u--input>
						</u-form-item>
					</u--form>

					<!-- <u-picker :show="accessoriesShow" :columns="[accessoriesList]" keyName="product_name"
						@confirm="handleAccessoriesConfirm" @close="accessoriesShow=false"
						@cancel="accessoriesShow=false"></u-picker> -->


					<u-picker :show="cargoDamageShow" :columns="[cargoDamageList]" keyName="name"
						@confirm="handleCargoDamageConfirm" @close="cargoDamageShow=false"
						@cancel="cargoDamageShow=false"></u-picker>

					<template v-if="cargoDamageInfo.damageType">
						<u-picker :show="supplierShow"
							:columns="cargoDamageInfo.damageType == 1 ? [roleKeyUserList] : [suppliersList]"
							:keyName="cargoDamageInfo.damageType == 1 ? 'nickName' : 'companyName'"
							@confirm="handleSupplierConfirm" @close="supplierShow=false"
							@cancel="supplierShow=false"></u-picker>
					</template>


					<view class="jCenter mt30">
						<view class="w200 " style="margin-right: 30rpx;">
							<u-button size="small" @click="handleCargoDamageClose" text="取消"></u-button>
						</view>
						<view class="w200">
							<u-button size="small" @click="cargoDamageSubmit" type="primary" text="确认"></u-button>
						</view>
					</view>
				</view>
			</u-popup>


			<!-- 提交工费 -->
			<u-modal :show="laborCostShow" @confirm="handlleConfirmSubmission" @cancel="laborCostShow=false"
				showCancelButton title="提示" content='提交工费后，当前所添加的所有工费将无法编辑和删除请确认无误后操作'></u-modal>
			<!-- 工序完结 -->
			<u-modal :show="processShow" @confirm="handleProcessConfirm" @cancel="processShow=false" showCancelButton
				title="提示" :content='submitContent'></u-modal>

			<view class="mt30">
				<u-subsection :list="['工费', '货损']" mode="subsection" :current="curNow"
					@change="handleSubsection"></u-subsection>
			</view>
		</view>


		<view class="list-container">
			<template v-if="curNow == 0">
				<view class="item flex mb20" v-for="(item, index) in staffWagesBos" :key="index">
					<view class="flex-1">
						<view class="name_text">
							员工名称: {{ item.name || '' }}
						</view>
						<view class="name_text">
							生产数量: {{ item.number || 0 }}
						</view>
						<view class="name_text">
							工费总价:￥{{ (Number(item.number) * Number(datails.price)).toFixed(3) }}
						</view>
					</view>
					<view class="" style="border-left: 1rpx solid #BBBBBB;"></view>
					<view class="flex-1 pl10">
						<view class="name_text" style="color: #FFF;">
							1
						</view>
						<view class="name_text">
							工费单价:￥{{ datails.price || 0 }}
						</view>
						<view class="name_text flex">
							操作: <u-icon @click="handleEdit(item, index)" color="#69AFF0" size="28"
								style="margin: 0 50rpx;" name="edit-pen"></u-icon>
							<u-icon @click="handleDelete(index)" color="#F75F51" size="28" name="trash-fill"></u-icon>
						</view>
					</view>
				</view>
			</template>
			<template v-else-if="curNow == 1">
				<view class="item mb20" v-for="(item, index) in damageGoodsBos" :key="index">
					<!-- 	<view class="mb20">
						配件名称: {{ item.name || '' }}
					</view> -->
					<view class="mb20">
						本次货损数量: {{ item.damageNumber || 0 }}
					</view>
					<view class="mb20">
						货损原因: {{ item.damageName || '' }}
					</view>
					<view class="mb20">
						责任人/供应商: {{ item.responsibilityName || '' }}
					</view>
					<view class="mb20">
						货损产品单价: {{ item.price || 0 }}
					</view>

					<view class="flex">
						操作: <u-icon @click="handleCargoDamageEdit(item, index)" color="#69AFF0" size="28"
							style="margin: 0 50rpx;" name="edit-pen"></u-icon>
						<u-icon @click="handleCargoDamageDelete(index)" color="#F75F51" size="28"
							name="trash-fill"></u-icon>
					</view>
				</view>
			</template>
		</view>


		<view class="aCenter jCenter column" style="margin-bottom: 50rpx;">
			<view class="aCenter">
				<div style="margin-right: 10rpx;">结束生产:</div>
				<u-radio-group v-model="checked">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="" style="width: 200rpx;margin-top: 20rpx;">
				<u-button @click="handleProcessCompletion" type="primary " text="提交"></u-button>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				addShow: false,
				employeeShow: false,
				actions: [],
				employeeList: [],
				radiolist1: [{
						name: '是',
						disabled: true
					},
					{
						name: '否',
						disabled: false
					},
				],
				info: {
					name: '',
					number: '',
					staffId: '',
					unitPrice: '',
					departmentNume: '',
				},
				cargoDamageInfo: {
					// accessoryId: '',
					// name: '',
					damageNumber: '',
					damageType: '',
					damageName: '',
					responsibilityId: '',
					responsibilityName: '',
					price: '',
				},
				rules: {
					'number': {
						type: 'string',
						required: true,
						message: '请输入数量',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请选择员工',
						trigger: ['blur', 'change']
					},
				},

				cargoDamageRules: {
					// 'name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择配件',
					// 	trigger: ['blur', 'change']
					// },
					'damageNumber': {
						type: 'string',
						required: true,
						message: '请输入货损数量',
						trigger: ['blur', 'change']
					},
					'damageName': {
						type: 'string',
						required: true,
						message: '请选择货损原因',
						trigger: ['blur', 'change']
					},
					'responsibilityName': {
						type: 'string',
						required: true,
						message: '请选择责任人/供应商',
						trigger: ['blur', 'change']
					},
					'price': {
						type: 'string',
						required: true,
						message: '请输入货损单价',
						trigger: ['blur', 'change']
					},
				},

				staffWagesBos: [],
				damageGoodsBos: [],
				laborCostShow: false,
				submitContent: '',
				processShow: false,

				addCargoDamageShow: false,

				checked: '是',
				curNow: 0,

				ids: '',
				bomId: '',
				datails: {},

				accessoriesShow: false,
				cargoDamageShow: false,
				supplierShow: false,

				// accessoriesList: [],
				cargoDamageList: [{
					name: '人为导致',
					id: 1
				}, {
					name: '货品原因',
					id: 2
				}, {
					name: '货品缺失',
					id: 3
				}],

				suppliersList: [],
				roleKeyUserList: [],

				completeNumber: 0,
				editIndex: null,

				relationId: '',
				materialName: '',
				saleOrderCode: '',
				createTime: '',
				customerName: '',
				applyNumber: '',
				remark: '',
				
				departmentShow: false,
				departmentList: [],
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.relationId = e.relationId
			this.materialName = e.materialName
			this.saleOrderCode = e.saleOrderCode
			this.createTime = e.createTime
			this.customerName = e.customerName
			this.applyNumber = e.applyNumber
			this.remark = e.remark

			if (e.type == 1) {
				uni.setNavigationBarTitle({
					title: `录入餐具盒信息`
				});
			}

			if (e.type == 2) {
				uni.setNavigationBarTitle({
					title: `生日帽生产信息`
				});
			}

			if (e.type == 3) {
				uni.setNavigationBarTitle({
					title: `不锈钢生产信息`
				});
			}

			this.getInfo()
			this.getSuppliers()
			this.getResponsiblePerson()
			this.getDepartment()
		},
		methods: {
			handleCargoDamage() {
				this.addCargoDamageShow = true
			},

			/** 工序完结 */
			// 打开完结模拟框
			handleProcessCompletion() {

				if (this.staffWagesBos.length == 0) return this.$msg.error('请至少录入一个工费')

				let quantity = 0
				this.staffWagesBos.map(item => quantity += Number(item.number))
				this.completeNumber = quantity
				this.submitContent = '本次完工数量:' + quantity + ',完结后数量无法更改，请确认'
				this.processShow = true
			},

			// 确定完结
			async handleProcessConfirm() {

				const query = {
					id: this.datails.id,
					workProduceId: this.datails.workProduceId,
					customizedProductId: this.datails.customizedProductId,
					customizedChildrenId: this.datails.customizedChildrenId,
					number: this.completeNumber,
					completeFlag: this.checked == '是' ? '1' : '0',
					damageGoodsBos: this.damageGoodsBos,
					staffWagesBos: this.staffWagesBos,
				}


				try {
					const data = await this.$api.getProductionIntegrationWarehousingApi(query)
					uni.$u.toast('提交成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} catch (error) {
					//TODO handle the exception
				}


				this.processShow = false
			},

			/** 提交工费 */
			// 打开询问模拟框
			handleSubmitLaborFee() {
				this.laborCostShow = true
			},

			// 确认提交
			handlleConfirmSubmission() {
				this.laborCostShow = false
			},

			/** 添加工费 */

			// 确认添加
			handleAddConfirm() {
				const _this = this
				this.$refs.uForm.validate().then(res => {
					if (_this.editIndex != null) {
						_this.staffWagesBos.splice(_this.editIndex, 1, JSON.parse(JSON.stringify(_this.info)))
					} else {
						_this.staffWagesBos.push({
							..._this.info
						})
					}

					_this.handleAddClose()
					// uni.$u.toast('添加成功')
				}).catch(errors => {

				})
			},

			// 添加货损
			cargoDamageSubmit() {
				const _this = this
				this.$refs.uCargoDamageForm.validate().then(res => {
					if (_this.editIndex != null) {
						_this.damageGoodsBos.splice(_this.editIndex, 1, JSON.parse(JSON.stringify({
							..._this.cargoDamageInfo,
							bomProductId: _this.ids
						})))
					} else {
						_this.damageGoodsBos.push({
							..._this.cargoDamageInfo,
							bomProductId: _this.ids
						})
					}


					_this.handleCargoDamageClose()
					// uni.$u.toast('添加成功')
				}).catch(errors => {

				})
			},

			// 编辑添加的员工
			handleEdit(item, index) {
				this.info = JSON.parse(JSON.stringify(item))
				this.editIndex = index
				this.addShow = true
			},

			handleCargoDamageEdit(item, index) {
				this.cargoDamageInfo = JSON.parse(JSON.stringify(item))
				this.editIndex = index
				this.addCargoDamageShow = true
			},

			// 删除添加的员工
			handleDelete(index) {
				this.staffWagesBos.splice(index, 1)
			},

			handleCargoDamageDelete(index) {
				this.damageGoodsBos.splice(index, 1)
			},

			// 打开弹出层
			handleAdd() {
				this.addShow = true
			},
			// 关闭弹出层
			handleAddClose() {
				this.addShow = false
				this.info.name = ''
				this.info.staffId = ''
				this.info.number = ''
				this.editIndex = null
			},

			handleCargoDamageClose() {
				// this.cargoDamageInfo.name = ''
				// this.cargoDamageInfo.accessoryId = ''
				this.cargoDamageInfo.damageNumber = ''
				this.cargoDamageInfo.damageType = ''
				this.cargoDamageInfo.damageName = ''
				this.cargoDamageInfo.responsibilityId = ''
				this.cargoDamageInfo.responsibilityName = ''
				this.editIndex = null
				this.addCargoDamageShow = false
			},

			handleEmployeeConfirm({
				value
			}) {
				this.info.name = value[0].name
				this.info.staffId = value[0].id
				this.employeeShow = false
			},
			
			
			handleDepartmentConfirm({value}) {
				this.info.departmentNume = value[0].deptName
				this.getEmployee(value[0].deptId)
				this.departmentShow = false
			},
			
			// 获取员工

			// handleAccessoriesConfirm({
			// 	value
			// }) {
			// 	this.cargoDamageInfo.name = value[0].product_name
			// 	this.cargoDamageInfo.accessoryId = value[0].id
			// 	this.accessoriesShow = false
			// },

			handleCargoDamageConfirm({
				value
			}) {
				this.cargoDamageInfo.damageName = value[0].name
				this.cargoDamageInfo.damageType = value[0].id
				this.cargoDamageShow = false
			},

			handleSupplierConfirm({
				value
			}) {
				if (this.cargoDamageInfo.damageType == 1) {
					this.cargoDamageInfo.responsibilityName = value[0].nickName
					this.cargoDamageInfo.responsibilityId = value[0].userId
				} else {
					this.cargoDamageInfo.responsibilityName = value[0].companyName
					this.cargoDamageInfo.responsibilityId = value[0].id
				}

				this.supplierShow = false
			},

			handleSubsection(e) {
				this.curNow = e
			},


			/** 数据获取 */


			async getInfo() {
				try {
					const {
						data
					} = await this.$api.getCurrentProductionApi(this.ids, this.relationId)

					this.datails = data
					// this.relationId = data.relationId
					this.info.unitPrice = data.price
					// this.getAccessories()
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 获取全部员工

			async getEmployee(e) {
				try {
					const {
						data
					} = await this.$api.getDepartmentalStaffApi(e)

					this.employeeList = data
				} catch (error) {
					//TODO handle the exception
				}

			},

			// 获取配件
			// async getAccessories() {
			// 	try {
			// 		const {
			// 			data
			// 		} = await this.$api.getPackingRelatedProductApi(this.relationId)
			// 		this.accessoriesList = data
			// 	} catch (error) {
			// 		//TODO handle the exception
			// 	}
			// },

			//获取全部供应商列表
			async getSuppliers() {
				try {
					const {
						data
					} = await this.$api.getSuppliersApi('1')

					this.suppliersList = data
				} catch (error) {
					//TODO handle the exception
				}
			},
			
			// 获取全部部门
			async getDepartment() {
				try {
					const {
						data
					} = await this.$api.getAllDepartmentApi()
				
					console.log(data, '部门')
					this.departmentList = data
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 获取责任人
			async getResponsiblePerson() {
				try {
					const {
						data
					} = await this.$api.getUserListByRole('business_role')

					this.roleKeyUserList = data
				} catch (error) {
					//TODO handle the exception
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
			this.$refs.uCargoDamageForm.setRules(this.cargoDamageRules)

		},
	}
</script>

<style scoped lang="scss">
	.container {
		// display: flex;
		// flex-direction: column;
		// height: 100vh;
		/* 或者使用 100% */

		// .content {
		// 	flex: 0 0 auto;
		// }

		.list-container {
			// flex: 1;
			// overflow: auto;
			padding-top: 50rpx;

			.item {
				border-radius: 10rpx;
				border: 1rpx solid #BBBBBB;
				background-color: #FFF;
				padding: 20rpx;


				.name_text {
					font-weight: bold;
					margin-bottom: 30rpx;
				}
			}
		}
	}


	.dome {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin: 10rpx auto;
		width: 710rpx;
	}
</style>